<template>
    <div class="min-h-screen bg-gray-100 flex flex-col items-center">
        <!-- 返回按钮 -->
        <div class="w-[90%] mt-[8vh] flex justify-between items-center mb-4">
            <var-button color="#006263" text-color="white" @click="handleBack" >返回</var-button>
            <var-input v-model="searchText" variant="outlined" placeholder="搜索" focus-color="#006263" size="small" @change="handleSearch" />
        </div>
        <div class="bg-white p-2 rounded-lg shadow-md w-[90%] flex flex-col items-center">
            <div class="max-h-[488px] w-full overflow-y-auto relative">
                <table class="min-w-full">
                    <thead>
                        <tr>
                            <th v-for="header in headers" :key="header" class="sticky top-0 bg-gray-50 px-6 py-3 text-center text-base font-medium text-gray-500 z-10">
                                {{ header }}
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-if="listLoading">
                            <td colspan="6" class="px-6 py-1.4 text-center text-base text-gray-500">
                                <var-loading description="LOADING" color="#006263" />
                            </td>
                        </tr>
                        <tr v-if="list.length === 0 && !listLoading">
                            <td colspan="6" class="px-6 py-1.4 text-center text-base text-gray-500">暂无数据</td>
                        </tr>
                        <tr v-for="(record, index) in list" :key="index" class="odd:bg-white even:bg-gray-50" v-hover="{ color: 'var(--color-on-primary)', background: '#F0F0F0' }">
                            <td class="px-6 py-1.5 text-center text-base text-gray-900">{{ record.name || '-' }}</td>
                            <td class="px-6 py-1.5 text-center text-base text-gray-900">{{ record.age || '-' }}</td>
                            <td class="px-6 py-1.5 text-center text-base text-gray-900">{{ record.sex || '-' }}</td>
                            <td class="px-6 py-1.5 text-center text-base text-gray-900">{{ record.creatorName || '-' }}</td>
                            <td class="px-6 py-1.5 text-center text-base text-gray-900">{{ formatDate(record.lastVisitDate) || '-' }}</td>
                            <td class="px-6 py-1 text-base">
                                <div class="flex flex-col items-center justify-center">
                                    <var-space :size="[10, 10]">
                                        <var-button block color="#006263" text-color="white" @click="viewRecord(record)" style="border-radius: 8px">选择</var-button>
                                    </var-space>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <!-- 分页组件 -->
            <div class="flex justify-center mt-6">
                <var-pagination v-model="currentPage" v-model:size="pageSize" :total="total" :page-size="pageSize"  :size-option="[10, 20, 30]"  @change="handlePageChange" style="color: #006263" />
            </div>
        </div>
    </div>
</template>

<script>
import dayjs from 'dayjs';
import { uuidv7 } from 'uuidv7';
export default {
    data() {
        return {
            headers: ['姓名', '年龄', '性别', '创建人', '最近就诊时间', '操作'],
            list: [],
            searchText: '',
            listLoading: false, // 列表加载状态
            currentPage: 1, // 当前页码
            pageSize: 10, // 每页显示的记录数
            total: 0 // 总记录数
        };
    },
    mounted() {
        if (this.user.authenticationFlag === '1') {
            this.getMyPatient();
        }
    },
    computed: {
        user() {
            return this.$store.user;
        }
    },
    methods: {
        async handleSearch() {
            if (this.searchText.trim() === '') {
                await this.getMyPatient();
                return;
            }
            this.currentPage = 1;
            this.getMyPatientSearch();
        },
        async getMyPatientSearch() {
            this.list = [];
            this.listLoading = true;
            const res = await this.$api.patient.searchPatients({ pageNum: this.currentPage, pageSize: this.pageSize, keyword: this.searchText, type: 1 });
            this.listLoading = false;
            if (res.success) {
                this.list = res.data.list; // 提取数组字段
                this.total = res.data.total; // 提取总记录数
            } else {
                this.$api.notify.error(res.error);
                this.list = [];
                this.total = 0;
            }
        },
        //用户获取我的患者信息接口
        async getMyPatient() {
            this.list = [];
            this.listLoading = true;
            const res = await this.$api.patient.getMyPatient({ pageNum: this.currentPage, pageSize: this.pageSize, type: 1 });
            this.listLoading = false;
            if (res.success) {
                this.list = res.data.list; // 提取数组字段
                this.total = res.data.total; // 提取总记录数
            } else {
                this.list = [];
                this.total = 0;
            }
        },
        viewRecord(record) {
            const id = uuidv7();
            this.$store.record.recordId = id;
            this.$store.record.patientId = record.patientId;
            this.$store.record.visitCardId = record.visitCardId;
            this.$store.record.name = record.name;
            this.$store.record.phone = record.phone;
            this.$store.record.age = record.age;
            this.$store.record.sex = record.sex;
        },
        formatDate(date) {
            if (date == null) {
                return '';
            }
            return dayjs(date).format('YYYY年MM月DD日 HH:mm:ss');
        },
        // 处理分页变化
        handlePageChange(page, pageSize) {
            if (this.searchText.trim() === '') {
                if (page !== this.currentPage) {
                    this.currentPage = page;
                    this.getMyPatient();
                }
                if (this.pageSize !== pageSize) {
                    this.pageSize = pageSize;
                    this.currentPage = 1; // 切换分页大小时重置到第一页
                    this.getMyPatient();
                }
            } else {
                if (page !== this.currentPage) {
                    this.currentPage = page;
                    this.getMyPatientSearch();
                }
                if (this.pageSize !== pageSize) {
                    this.pageSize = pageSize;
                    this.currentPage = 1; // 切换分页大小时重置到第一页
                    this.getMyPatientSearch();
                }
            }
        },
        handleBack() {
            this.$emit('back'); // 触发返回事件
        }
    }
};
</script>

<style scoped></style>
